<Page [ngClass]="'toptips'" [title]="'Toptips'" [subTitle]="'弹出式提示'">
  <div class="weui-cells__title">使用组件形式</div>
  <button weui-button [weui-type]="'default'" (click)="onShow('warn')">Warn Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShow('info')">Info Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShow('primary')">Primary Toptip</button>
  <div class="weui-cells__title">使用Service形式</div>
  <button weui-button [weui-type]="'default'" (click)="onShowBySrv('default')">Default Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShowBySrv('success')">Success Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShowBySrv('warn')">Warn Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShowBySrv('info')">Info Toptip</button>
  <button weui-button [weui-type]="'default'" (click)="onShowBySrv('primary')">Primary Toptip</button>

  <!--将对话框组件放在底部-->
  <weui-toptips #toptips [text]="text" [type]="type"></weui-toptips>
</Page>
